<template>
  <div class="search">
    <el-autocomplete @select="goDetail" clearable placeholder="请输入医院名称" v-model="hosname" :fetch-suggestions="fetchData"/>
    <el-button type="primary" :icon="Search"></el-button>
  </div>
</template>
<script setup lang="ts">
//引入element-plus icon
import { Search } from "@element-plus/icons-vue";
import {useRouter} from 'vue-router';
import { ref } from 'vue';
//引入请求方法
import { reqHospitalInfo } from "@/api/home";
import type { HospitalInfo } from "@/api/home/type";
//创建路由对象
let $router = useRouter();
//收集搜索的关键字(医院的名字)
let hosname = ref<string>("")
//顶部组件的回调
const fetchData = async(keyword:string,cb:any) => {
  await reqHospitalInfo(keyword).then((res:HospitalInfo)=>{
    console.log(res);
    if(res.code == 200){
      let showData = res.data.map(item =>{
      return {
        value:item.hosname,
        hoscode:item.hoscode
      }
    })
    cb(showData) 
    }
      
  }) 
  
}
//点击某一个推荐项
const goDetail = (item:any)=>{
  console.log(item);
  //点击进入详情页
  $router.push({path:'/hospital/register',query:{hoscode:item.hoscode}})
  
}
</script>
<script lang="ts">
  // export default{
  //   name:'Search',
  // }
</script>
<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  ::v-deep(.el-input__wrapper) {
    width: 600px;
  }
}
</style>
